<template>
  <div>
    <el-card shadow="never" class="box-card">
      <div slot="header" class="clearfix">
        <span>运动员</span>
        <el-button @click="addPlayerModal=true" style="float: right; padding: 0" type="text" icon="el-icon-setting">管理运动员
        </el-button>
      </div>
      <div class="card-body">
        <el-alert @close="playerClose(index)" v-for="(item,index) in currentPlayerData" :key="item"
          class="text item" :title="dict_player[item]"></el-alert>
      </div>
    </el-card>
    <vxe-modal v-model="addPlayerModal" title="运动员管理" width="630" height="420" show-footer>
      <template #default>
        <el-transfer v-model="currentPlayerData" :data="allPlayerData" :titles="['未添加','已添加']" filterable
          :filter-method="filterMethod" filter-placeholder="快捷检索" target-order="push"></el-transfer>
      </template>
      <template #footer>
        <el-button @click="addPlayerEvent" type="primary" icon="" size="mini">确定</el-button>
      </template>
    </vxe-modal>
  </div>
</template>

<script>
  export default {
    props: ['dict_player','currentPlayerData','allPlayerData'],
    data() {
      return {
        addPlayerModal: false,
        filterMethod(query, item) {
          return item.label.indexOf(query) > -1;
        },
      }
    },
    methods: {
      playerClose(index) {
        this.$emit('playerClose',index)
      },
      addPlayerEvent() {
        this.addPlayerModal = false
      },
    }
  }
</script>

<style lang="scss" scoped>
</style>
